<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="keywords" content="EduBot,教育小助手,AI助手,智能对话,人工智能,聊天机器人,小智,智能AI,赛博对话,AI交互,语言模型,即时回答,智能问答系统,AI聊天,实时对话,个人助理,赛博朋克,智能回复,深度学习,AI互动,智能客服,语音助手">
    <meta name="description" content="EduBot智能AI对话助手，提供实时智能对话服务，支持自然语言交互，帮助用户解答问题、提供建议，打造智能教育辅助体验。">
    <title>EduBot - 智能AI对话助手</title>
    <link rel="icon" type="image/png" href="static/icons/AiKeTangJiaoXuePingCeXiTong.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #0a0a1a 0%, #16213e 100%);
            --primary-color: #0f3460;
            --accent-color: #00ffd1;
            --accent-glow: #00ffd1;
            --text-light: #e6e6e6;
            --text-dark: #1a1a2e;
            --bg-light: rgba(255, 255, 255, 0.95);
            --bg-dark: #1a1a2e;
            --border-color: rgba(0, 255, 209, 0.2);
            --shadow-regular: 0 4px 6px rgba(0, 0, 0, 0.2);
            --shadow-hover: 0 8px 16px rgba(0, 255, 209, 0.3);
            --glass-bg: rgba(26, 26, 46, 0.85);
            --glass-border: rgba(0, 255, 209, 0.1);
            --message-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            --transition-speed: 0.3s;
            --neon-glow: 0 0 10px rgba(0, 255, 209, 0.5), 0 0 20px rgba(0, 255, 209, 0.3), 0 0 30px rgba(0, 255, 209, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--primary-gradient);
            color: var(--text-light);
            height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(0, 255, 209, 0.05) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(0, 102, 255, 0.05) 0%, transparent 30%);
            z-index: -1;
        }

        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            max-width: 1200px;
            margin: 20px auto;
            width: calc(100% - 40px);
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: var(--shadow-regular);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            animation: fadeIn 0.6s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .chat-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
            text-align: center;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--glass-bg);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .chat-header::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
            animation: wave 2s linear infinite;
        }

        @keyframes wave {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .chat-header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: var(--accent-color);
            letter-spacing: 0.5px;
            text-shadow: var(--neon-glow);
            position: relative;
        }

        .chat-header h1::before, .chat-header h1::after {
            content: '';
            position: absolute;
            height: 2px;
            width: 30px;
            background: var(--accent-color);
            top: 50%;
            transform: translateY(-50%);
            box-shadow: var(--neon-glow);
        }

        .chat-header h1::before {
            left: -40px;
        }

        .chat-header h1::after {
            right: -40px;
        }

        .nav-button {
            position: fixed;
            top: 20px;
            left: 20px;
            padding: 12px 24px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            color: var(--accent-color);
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 1000;
            font-size: 14px;
            font-weight: 500;
            box-shadow: var(--shadow-regular);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            text-shadow: 0 0 5px var(--accent-color);
        }

        .nav-button:hover {
            background: rgba(0, 255, 209, 0.1);
            color: var(--text-light);
            transform: translateY(-2px) scale(1.05);
            box-shadow: var(--shadow-hover), 0 0 15px rgba(0, 255, 209, 0.5);
            border-color: var(--accent-color);
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            scroll-behavior: smooth;
            display: flex;
            flex-direction: column-reverse;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(0, 255, 209, 0.03) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(0, 102, 255, 0.03) 0%, transparent 20%);
        }

        .chat-messages::-webkit-scrollbar {
            width: 8px;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: var(--glass-bg);
            border-radius: 4px;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: var(--accent-color);
            border-radius: 4px;
            border: 2px solid var(--glass-bg);
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: #00e6b8;
        }

        .message {
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            animation: slideIn 0.5s ease forwards;
            opacity: 0;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message.user {
            align-items: flex-end;
        }

        .message.ai {
            align-items: flex-start;
        }

        .message-content {
            max-width: 90%;
            padding: 14px 18px;
            border-radius: 16px;
            margin: 6px 0;
            word-wrap: break-word;
            line-height: 1.6;
            font-size: 15px;
            box-shadow: var(--message-shadow);
            position: relative;
            overflow: hidden;
            transition: box-shadow var(--transition-speed) ease;
        }

        .message-content pre {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            padding: 12px;
            margin: 8px 0;
            overflow-x: auto;
        }

        .message-content code {
            font-family: 'Fira Code', monospace;
            font-size: 14px;
        }

        .message-content p {
            margin: 8px 0;
        }

        .message-content ul, .message-content ol {
            margin: 8px 0;
            padding-left: 20px;
        }

        .message-content table {
            border-collapse: collapse;
            margin: 8px 0;
            width: 100%;
        }

        .message-content th, .message-content td {
            border: 1px solid var(--border-color);
            padding: 8px;
            text-align: left;
        }

        .message-content th {
            background: rgba(0, 255, 209, 0.1);
        }

        .user .message-content {
            background: var(--primary-color);
            color: var(--text-light);
            border-radius: 16px 4px 16px 16px;
            transform-origin: right bottom;
            border: 1px solid rgba(0, 255, 209, 0.2);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        .ai .message-content {
            background: var(--glass-bg);
            color: var(--text-light);
            border: 1px solid var(--glass-border);
            border-radius: 4px 16px 16px 16px;
            transform-origin: left bottom;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 255, 209, 0.1);
        }

        .message-content:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 255, 209, 0.2);
        }

        .user .message-content:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 255, 209, 0.2);
        }

        .ai .message-content:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 255, 209, 0.2);
        }

        .input-container {
            padding: 20px 24px;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 12px;
            background: var(--glass-bg);
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 10;
        }

        .input-container::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
            opacity: 0.6;
        }

        .new-chat-button {
            position: absolute;
            top: 10px;
            right: 24px;
            padding: 8px 16px;
            background: rgba(15, 52, 96, 0.7);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            color: var(--accent-color);
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            box-shadow: var(--message-shadow);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            text-shadow: 0 0 5px rgba(0, 255, 209, 0.5);
        }

        .new-chat-button:hover {
            background: rgba(0, 255, 209, 0.2);
            color: var(--text-light);
            transform: translateY(-2px) scale(1.05);
            box-shadow: var(--shadow-hover), 0 0 15px rgba(0, 255, 209, 0.3);
            border-color: var(--accent-color);
        }

        .input-container input {
            flex: 1;
            padding: 16px 20px;
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            background: rgba(26, 26, 46, 0.7);
            color: var(--text-light);
            font-size: 15px;
            transition: all var(--transition-speed) ease;
            box-shadow: var(--message-shadow);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .input-container input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(0, 255, 209, 0.2), inset 0 0 10px rgba(0, 255, 209, 0.05);
            background: rgba(26, 26, 46, 0.9);
        }

        .input-container input::placeholder {
            color: rgba(230, 230, 230, 0.5);
        }

        .input-container button {
            padding: 16px 28px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary-color) 0%, rgba(15, 52, 96, 0.9) 100%);
            color: var(--accent-color);
            cursor: pointer;
            font-weight: 600;
            transition: all var(--transition-speed) ease;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--message-shadow);
            border: 1px solid rgba(0, 255, 209, 0.2);
            text-shadow: 0 0 5px rgba(0, 255, 209, 0.5);
        }

        .input-container button::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            z-index: -1;
            background: linear-gradient(45deg, var(--accent-color), #0066ff, var(--accent-color));
            border-radius: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .input-container button:hover::before {
            opacity: 0.5;
            animation: borderAnimation 2s linear infinite;
        }

        @keyframes borderAnimation {
            0% { background-position: 0 0; }
            100% { background-position: 400% 0; }
        }

        .input-container button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .input-container button:focus:not(:active)::after {
            animation: ripple 1s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }

        .input-container button:hover {
            background: var(--accent-color);
            color: var(--text-dark);
            transform: translateY(-2px) scale(1.02);
            box-shadow: var(--shadow-hover), 0 0 15px rgba(0, 255, 209, 0.3);
            text-shadow: none;
        }

        .input-container button:active {
            transform: translateY(1px);
        }

        .loading {
            display: none;
            padding: 20px;
            text-align: center;
            color: var(--accent-color);
        }

        .loading span {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin: 0 6px;
            background: var(--accent-color);
            border-radius: 50%;
            animation: quantumBounce 1.4s infinite ease-in-out;
            box-shadow: 0 0 10px var(--accent-color);
        }

        .loading span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .loading span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes quantumBounce {
            0%, 100% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .chat-container {
                width: 100%;
                margin: 0;
                border-radius: 0;
                height: 100vh;
            }
            
            .message-content {
                max-width: 95%;
                padding: 12px 16px;
                font-size: 14px;
            }
            
            .input-container {
                padding: 16px;
            }
            
            .input-container input,
            .input-container button {
                padding: 12px 16px;
            }

            .nav-button {
                top: 16px;
                left: 16px;
                bottom: auto;
                padding: 8px 16px;
                font-size: 12px;
            }
            
            .new-chat-button {
                top: 16px;
                right: 16px;
                padding: 6px 12px;
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            .message-content {
                max-width: 98%;
            }
            
            .input-container {
                flex-direction: column;
                gap: 10px;
                padding: 12px;
            }
            
            .input-container button {
                width: 100%;
                justify-content: center;
                padding: 12px;
            }
            
            .input-container input {
                padding: 12px;
            }

            .chat-header h1::before, .chat-header h1::after {
                width: 20px;
            }

            .chat-header h1::before {
                left: -30px;
            }

            .chat-header h1::after {
                right: -30px;
            }
            
            .chat-messages {
                padding: 16px;
            }
        }

        @media (min-width: 481px) and (max-width: 1024px) {
            .chat-container {
                margin: 15px auto;
                width: calc(100% - 30px);
            }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h1>EduBot</h1>
        </div>
        <div class="chat-messages" id="chatMessages">
        </div>
        <div class="loading" id="loading">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <button class="new-chat-button" id="newChatBtn">
            <i class="fas fa-plus"></i>
            新建对话
        </button>
        <div class="input-container">
            <input type="text" id="userInput" placeholder="请输入您的问题..." autocomplete="off">
            <button id="sendBtn">
                <i class="fas fa-paper-plane"></i>
                发送
            </button>
        </div>
    </div>
    <button class="nav-button" id="navBtn">
        <i class="fas fa-compass"></i>
        导航
    </button>

    <script src="{{ url_for('static', filename='javascripts/AiChat.js') }}"></script>
    <script>
        let historicalChatHistory = '';
        const frontEndDomain = '{{ front_end_domain_name }}';
        const backEndDomain = '{{ backend_domain_name }}';
        let canSendMessage = true;
        let isFirstMessage = true;
        
        function handleError(message) {
            addMessage('系统发生错误，请刷新页面重试。', 'ai');
            document.getElementById('loading').style.display = 'none';
            canSendMessage = true;
            document.getElementById('sendBtn').disabled = false;
            return true;
        }
        
        window.onerror = handleError;
        
        async function checkTokenAndRedirect() {
            const token = localStorage.getItem('token');
            if (!token) {
                window.location.href = frontEndDomain + '/login_register_page';
                return;
            }
            
            const username = await checkToken(backEndDomain, token);
            if (!username) {
                window.location.href = frontEndDomain + '/login_register_page';
                return;
            }
            
            return username;
        }
        
        let currentUsername = '';
        
        function initEventListeners() {
            document.getElementById('userInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage(true);
                }
            });
            
            document.getElementById('sendBtn').addEventListener('click', function() {
                sendMessage(true);
            });
            
            document.getElementById('newChatBtn').addEventListener('click', function() {
                newChat();
            });
            
            document.getElementById('navBtn').addEventListener('click', function() {
                window.location.href = frontEndDomain + '/navigation_page';
            });
        }
        
        window.addEventListener('load', async function() {
            document.getElementById('loading').style.display = 'block';
            
            try {
                currentUsername = await checkTokenAndRedirect();
                if (!currentUsername) {
                    return;
                }
                
                initEventListeners();
                
                setTimeout(() => {
                    document.getElementById('userInput').value = '你好';
                    isFirstMessage = false;
                    canSendMessage = true;
                    sendMessage(false);
                }, 500);
            } catch (error) {
                handleError(error);
            } finally {
                document.getElementById('loading').style.display = 'none';
            }
        });
        
        async function sendMessage(showUserMessage = true) {
            if (!canSendMessage || (isFirstMessage && showUserMessage)) return;
            
            const input = document.getElementById('userInput');
            const message = input.value.trim();
            const sendButton = document.getElementById('sendBtn');
            
            if (message) {
                if (showUserMessage) {
                    addMessage(message, 'user');
                }
                input.value = '';
                
                document.getElementById('loading').style.display = 'block';
                canSendMessage = false;
                sendButton.disabled = true;
                
                try {
                    const token = localStorage.getItem('token');
                    if (!token) {
                        window.location.href = frontEndDomain + '/login_register_page';
                        return;
                    }
                    
                    const validUsername = await checkToken(backEndDomain, token);
                    if (!validUsername) {
                        window.location.href = frontEndDomain + '/login_register_page';
                        return;
                    }
                    
                    const aiResponse = await getAiOutput(backEndDomain, token, message, historicalChatHistory);
                    
                    if (typeof aiResponse === 'string') {
                        addMessage(aiResponse, 'ai');
                        historicalChatHistory += `${currentUsername}: ${message}\nAI: ${aiResponse}\n`;
                    } else {
                        addMessage('抱歉，发生了错误，请稍后重试。', 'ai');
                    }
                } catch (error) {
                    if (error && error.name === 'RuntimeError' && error.message && error.message.includes('message port closed')) {
                        return;
                    }
                    addMessage('网络错误，请检查您的网络连接。', 'ai');
                } finally {
                    document.getElementById('loading').style.display = 'none';
                    canSendMessage = true;
                    sendButton.disabled = false;
                    input.focus();
                }
            }
        }
        
        function addMessage(text, sender) {
            const messagesContainer = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}`;
            
            const contentDiv = document.createElement('div');
            contentDiv.className = 'message-content';
            
            contentDiv.innerHTML = marked.parse(text);
            
            contentDiv.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightElement(block);
            });
            
            messageDiv.appendChild(contentDiv);
            messagesContainer.prepend(messageDiv);
        }
        
        function newChat() {
            historicalChatHistory = '';
            document.getElementById('chatMessages').innerHTML = '';
            isFirstMessage = true;
            setTimeout(() => {
                document.getElementById('userInput').value = '你好';
                isFirstMessage = false;
                sendMessage(false);
            }, 300);
        }
    </script>
</body>
</html>